<template>
  <div>
    <el-card
      >=={{ id }}
      <el-tabs>
        <el-tab-pane label="登录账户设置">
          <el-form
            style="width:40%;margin:20px  0  20px 50px"
            :model="userInfo"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="username">
              <el-input v-model="userInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password2">
              <el-input v-model="userInfo.password2"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情">
          <!-- <user-info></user-info> -->
          <component :is="userInfos"></component>
        </el-tab-pane>
        <el-tab-pane label="岗位信息">
          <!-- <job-info></job-info> -->
          <component :is="jobInfos"></component>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { userInfoDetailApi } from "@/api/user";
import { saveUserDetailByIdApi } from "@/api/employee";
import userInfo from "./components/user-info";
import jobInfo from "./components/job-info";
export default {
  components: {
    userInfo,
    jobInfo
  },
  name: "",
  data() {
    return {
      id: this.$route.params.id,
      userInfos: "userInfo",
      jobInfos: "jobInfo",
      userInfo: {
        //   专门存放基本信息
        username: "",
        password2: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password2: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 9, message: "密码长度6-9位", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getUserDetail();
  },
  methods: {
    async getUserDetail() {
      const res = await userInfoDetailApi(this.id);
      console.log(res, 6666);
      this.userInfo = res;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //  二次校验成功
          //console.log(this.userInfo,7777);
          await saveUserDetailByIdApi({
            ...this.userInfo,
            password: this.userInfo.password2
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped></style>
